
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-shuaxin"></i>
                    <div class="name">刷新</div>
                    <div class="fontclass">.icon-shuaxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyu"></i>
                    <div class="name">教育</div>
                    <div class="fontclass">.icon-jiaoyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhi"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingfenbiao"></i>
                    <div class="name">评分表</div>
                    <div class="fontclass">.icon-pingfenbiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianjin"></i>
                    <div class="name">前进</div>
                    <div class="fontclass">.icon-qianjin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ordinaryprint"></i>
                    <div class="name">打印</div>
                    <div class="fontclass">.icon-ordinaryprint</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jixieshebeijizhaomingb"></i>
                    <div class="name">机械设备及照明_b</div>
                    <div class="fontclass">.icon-jixieshebeijizhaomingb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-llalbumshopselectorcancel"></i>
                    <div class="name">关闭</div>
                    <div class="fontclass">.icon-llalbumshopselectorcancel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugai1"></i>
                    <div class="name">修改</div>
                    <div class="fontclass">.icon-xiugai1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duihao"></i>
                    <div class="name">对号</div>
                    <div class="fontclass">.icon-duihao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-105dubanxiaoxitongjifenxi"></i>
                    <div class="name">105督办消息统计分析</div>
                    <div class="fontclass">.icon-105dubanxiaoxitongjifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconshanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-iconshanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontshezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-iconfontshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaping"></i>
                    <div class="name">差评</div>
                    <div class="fontclass">.icon-chaping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-22"></i>
                    <div class="name">上传</div>
                    <div class="fontclass">.icon-22</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiala"></i>
                    <div class="name">下拉</div>
                    <div class="fontclass">.icon-xiala</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuichu2"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-tuichu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hetongshouru"></i>
                    <div class="name">合同收入</div>
                    <div class="fontclass">.icon-hetongshouru</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-msnui-sys-safety"></i>
                    <div class="name">系统安全</div>
                    <div class="fontclass">.icon-msnui-sys-safety</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingfeixinxi"></i>
                    <div class="name">经费信息</div>
                    <div class="fontclass">.icon-jingfeixinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinlingyingcaiwangtubiao58"></i>
                    <div class="name">未选中</div>
                    <div class="fontclass">.icon-jinlingyingcaiwangtubiao58</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon"></i>
                    <div class="name">闹钟</div>
                    <div class="fontclass">.icon-icon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mianxingtubiaoqianjin"></i>
                    <div class="name">面型图标_前进</div>
                    <div class="fontclass">.icon-mianxingtubiaoqianjin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuyuanjiaoyu"></i>
                    <div class="name">出院教育</div>
                    <div class="fontclass">.icon-chuyuanjiaoyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dagou"></i>
                    <div class="name">打钩</div>
                    <div class="fontclass">.icon-dagou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chaping1"></i>
                    <div class="name">差评</div>
                    <div class="fontclass">.icon-chaping1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconyidongdao"></i>
                    <div class="name">移动到</div>
                    <div class="fontclass">.icon-iconyidongdao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fa-angle-up"></i>
                    <div class="name">向上</div>
                    <div class="fontclass">.icon-fa-angle-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuxuankuang"></i>
                    <div class="name">复选框</div>
                    <div class="fontclass">.icon-fuxuankuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qita"></i>
                    <div class="name">其他</div>
                    <div class="fontclass">.icon-qita</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyupeixun"></i>
                    <div class="name">教育培训</div>
                    <div class="fontclass">.icon-jiaoyupeixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongzuotai"></i>
                    <div class="name">工作台</div>
                    <div class="fontclass">.icon-gongzuotai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti121"></i>
                    <div class="name">off</div>
                    <div class="fontclass">.icon-weibiaoti121</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiazhaopian"></i>
                    <div class="name">添加照片</div>
                    <div class="fontclass">.icon-tianjiazhaopian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">新增</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xunchaguanli"></i>
                    <div class="name">巡查管理</div>
                    <div class="fontclass">.icon-xunchaguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cha"></i>
                    <div class="name">差</div>
                    <div class="fontclass">.icon-cha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pugong"></i>
                    <div class="name">普工</div>
                    <div class="fontclass">.icon-pugong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-onkaiguan"></i>
                    <div class="name">ON开关</div>
                    <div class="fontclass">.icon-onkaiguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liebiao01"></i>
                    <div class="name">列表</div>
                    <div class="fontclass">.icon-liebiao01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoqian"></i>
                    <div class="name">标签</div>
                    <div class="fontclass">.icon-biaoqian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaodi"></i>
                    <div class="name">施工交底</div>
                    <div class="fontclass">.icon-jiaodi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuichu"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-tuichu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochu"></i>
                    <div class="name">导出</div>
                    <div class="fontclass">.icon-daochu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xueyuanjinlichang"></i>
                    <div class="name">学员进离场</div>
                    <div class="fontclass">.icon-xueyuanjinlichang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mima"></i>
                    <div class="name">密码</div>
                    <div class="fontclass">.icon-mima</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontrili"></i>
                    <div class="name">日历</div>
                    <div class="fontclass">.icon-iconfontrili</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangjian-copy"></i>
                    <div class="name">创建</div>
                    <div class="fontclass">.icon-chuangjian-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qbkh"></i>
                    <div class="name">情报考核</div>
                    <div class="fontclass">.icon-qbkh</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-word-copy"></i>
                    <div class="name">word</div>
                    <div class="fontclass">.icon-word-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyijilu-copy"></i>
                    <div class="name">记录</div>
                    <div class="fontclass">.icon-jiaoyijilu-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengxin"></i>
                    <div class="name">更新</div>
                    <div class="fontclass">.icon-gengxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodeyewubanli"></i>
                    <div class="name">我的_业务办理</div>
                    <div class="fontclass">.icon-wodeyewubanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daolushigong-copy"></i>
                    <div class="name">道路施工</div>
                    <div class="fontclass">.icon-daolushigong-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-prev-arrow"></i>
                    <div class="name">分页-01</div>
                    <div class="fontclass">.icon-prev-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next-arrow"></i>
                    <div class="name">分页-02</div>
                    <div class="fontclass">.icon-next-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zonglan"></i>
                    <div class="name">总览</div>
                    <div class="fontclass">.icon-zonglan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-3"></i>
                    <div class="name">规章制度1</div>
                    <div class="fontclass">.icon-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biao"></i>
                    <div class="name">表</div>
                    <div class="fontclass">.icon-biao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-doubleup-copy"></i>
                    <div class="name">双箭头</div>
                    <div class="fontclass">.icon-doubleup-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontwancheng"></i>
                    <div class="name">圆</div>
                    <div class="fontclass">.icon-iconfontwancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-question"></i>
                    <div class="name">问题</div>
                    <div class="fontclass">.icon-question</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongji9"></i>
                    <div class="name">统计9</div>
                    <div class="fontclass">.icon-tongji9</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renyuan"></i>
                    <div class="name">人员</div>
                    <div class="fontclass">.icon-renyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danweitijian"></i>
                    <div class="name">单位体检</div>
                    <div class="fontclass">.icon-danweitijian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fabugonggao"></i>
                    <div class="name">发布公告</div>
                    <div class="fontclass">.icon-fabugonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianjin-copy"></i>
                    <div class="name">前进</div>
                    <div class="fontclass">.icon-qianjin-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tongzhi1"></i>
                    <div class="name">通知</div>
                    <div class="fontclass">.icon-tongzhi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-grgzpt"></i>
                    <div class="name">个人工作台</div>
                    <div class="fontclass">.icon-grgzpt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziliao"></i>
                    <div class="name">资料</div>
                    <div class="fontclass">.icon-ziliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-4shigongdiaodu"></i>
                    <div class="name">4-施工调度</div>
                    <div class="fontclass">.icon-4shigongdiaodu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shigongzhuangtai"></i>
                    <div class="name">施工状态</div>
                    <div class="fontclass">.icon-shigongzhuangtai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.icon-folder</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixiguanli"></i>
                    <div class="name">体系管理</div>
                    <div class="fontclass">.icon-tixiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziliao1"></i>
                    <div class="name">资料</div>
                    <div class="fontclass">.icon-ziliao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxi-copy"></i>
                    <div class="name">消息</div>
                    <div class="fontclass">.icon-xiaoxi-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rongzixuqiushencha01"></i>
                    <div class="name">融资需求审查</div>
                    <div class="fontclass">.icon-rongzixuqiushencha01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tixing"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-tixing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongchengkaohe"></i>
                    <div class="name">工程考核</div>
                    <div class="fontclass">.icon-gongchengkaohe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontzhizuobiaozhun41"></i>
                    <div class="name">提醒</div>
                    <div class="fontclass">.icon-iconfontzhizuobiaozhun41</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meitibaodao"></i>
                    <div class="name">媒体报道</div>
                    <div class="fontclass">.icon-meitibaodao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ziliao2"></i>
                    <div class="name">资料</div>
                    <div class="fontclass">.icon-ziliao2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shebeiweihu"></i>
                    <div class="name">设备维护</div>
                    <div class="fontclass">.icon-shebeiweihu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinggao"></i>
                    <div class="name">警告</div>
                    <div class="fontclass">.icon-jinggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuangjiantou-copy"></i>
                    <div class="name">双箭头</div>
                    <div class="fontclass">.icon-shuangjiantou-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuxuankuangxuanzhong"></i>
                    <div class="name">复选框－选中</div>
                    <div class="fontclass">.icon-fuxuankuangxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gonggao"></i>
                    <div class="name">公告</div>
                    <div class="fontclass">.icon-gonggao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinruqiyemenhu2"></i>
                    <div class="name">进入企业门户2</div>
                    <div class="fontclass">.icon-jinruqiyemenhu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mendianziliao"></i>
                    <div class="name">门店资料</div>
                    <div class="fontclass">.icon-mendianziliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghu"></i>
                    <div class="name">用户</div>
                    <div class="fontclass">.icon-yonghu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoge"></i>
                    <div class="name">表格</div>
                    <div class="fontclass">.icon-biaoge</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jixie"></i>
                    <div class="name">机械</div>
                    <div class="fontclass">.icon-jixie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiabeizhu"></i>
                    <div class="name">添加备注</div>
                    <div class="fontclass">.icon-tianjiabeizhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wentijiaoliu"></i>
                    <div class="name">问题交流</div>
                    <div class="fontclass">.icon-wentijiaoliu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhuzhongxin"></i>
                    <div class="name">帮助中心</div>
                    <div class="fontclass">.icon-bangzhuzhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danganyingxiangchaxun"></i>
                    <div class="name">档案影像查询</div>
                    <div class="fontclass">.icon-danganyingxiangchaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">guanbi</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui1"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinchuhuo"></i>
                    <div class="name">进出货</div>
                    <div class="fontclass">.icon-jinchuhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjianjia"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.icon-wenjianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jilu3"></i>
                    <div class="name">记录3</div>
                    <div class="fontclass">.icon-jilu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-anquanjingbao"></i>
                    <div class="name">安全警报</div>
                    <div class="fontclass">.icon-anquanjingbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-haopingshuai"></i>
                    <div class="name">好评率</div>
                    <div class="fontclass">.icon-haopingshuai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangjiancaigoudan"></i>
                    <div class="name">创建采购单</div>
                    <div class="fontclass">.icon-chuangjiancaigoudan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuichu1"></i>
                    <div class="name">退出</div>
                    <div class="fontclass">.icon-tuichu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaohe"></i>
                    <div class="name">考核</div>
                    <div class="fontclass">.icon-kaohe</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-man"></i>
                    <div class="name">男</div>
                    <div class="fontclass">.icon-man</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chapingyujingshezhi"></i>
                    <div class="name">差评预警设置</div>
                    <div class="fontclass">.icon-chapingyujingshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fachugongdan"></i>
                    <div class="name">发出工单</div>
                    <div class="fontclass">.icon-fachugongdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon01"></i>
                    <div class="name">待处理</div>
                    <div class="fontclass">.icon-icon01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangxiajiantouhover"></i>
                    <div class="name">上下箭头hover</div>
                    <div class="fontclass">.icon-shangxiajiantouhover</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-updown-up"></i>
                    <div class="name">上下箭头hover</div>
                    <div class="fontclass">.icon-updown-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianchangshigong"></i>
                    <div class="name">现场施工</div>
                    <div class="fontclass">.icon-xianchangshigong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-banli"></i>
                    <div class="name">办理</div>
                    <div class="fontclass">.icon-banli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yujing"></i>
                    <div class="name">预警</div>
                    <div class="fontclass">.icon-yujing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yidu"></i>
                    <div class="name">已读</div>
                    <div class="fontclass">.icon-yidu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongwenliuzhuan"></i>
                    <div class="name">公文流转</div>
                    <div class="fontclass">.icon-gongwenliuzhuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-banjixiangce"></i>
                    <div class="name">相册－实心</div>
                    <div class="fontclass">.icon-banjixiangce</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dengji"></i>
                    <div class="name">登记</div>
                    <div class="fontclass">.icon-dengji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingtaiguanli"></i>
                    <div class="name">平台管理</div>
                    <div class="fontclass">.icon-pingtaiguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guidang"></i>
                    <div class="name">归档</div>
                    <div class="fontclass">.icon-guidang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-haoping"></i>
                    <div class="name">好评</div>
                    <div class="fontclass">.icon-haoping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xitongguanli"></i>
                    <div class="name">系统管理</div>
                    <div class="fontclass">.icon-xitongguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bitian"></i>
                    <div class="name">必填</div>
                    <div class="fontclass">.icon-bitian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjian"></i>
                    <div class="name">文件</div>
                    <div class="fontclass">.icon-wenjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-woman"></i>
                    <div class="name">女</div>
                    <div class="fontclass">.icon-woman</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-excel"></i>
                    <div class="name">表格</div>
                    <div class="fontclass">.icon-excel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-piliang"></i>
                    <div class="name">批量</div>
                    <div class="fontclass">.icon-piliang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-moban"></i>
                    <div class="name">模板</div>
                    <div class="fontclass">.icon-moban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">bofang</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-renyuanguanli"></i>
                    <div class="name">人员管理</div>
                    <div class="fontclass">.icon-renyuanguanli</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-peixun"></i>
                    <div class="name">培训</div>
                    <div class="fontclass">.icon-peixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xueyuanlichang"></i>
                    <div class="name">学员离场</div>
                    <div class="fontclass">.icon-xueyuanlichang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijiao"></i>
                    <div class="name">提交</div>
                    <div class="fontclass">.icon-tijiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaoduan"></i>
                    <div class="name">标段</div>
                    <div class="fontclass">.icon-biaoduan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qipaoxiao"></i>
                    <div class="name">气泡小</div>
                    <div class="fontclass">.icon-qipaoxiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-licheng"></i>
                    <div class="name">里程</div>
                    <div class="fontclass">.icon-licheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzhong1"></i>
                    <div class="name">选中</div>
                    <div class="fontclass">.icon-xuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou1"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-staff-copy"></i>
                    <div class="name">人员</div>
                    <div class="fontclass">.icon-staff-copy</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
